<template>
  <van-form>
    <van-field
      v-model="sysuser.username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
    />
    <van-field
      v-model="sysuser.password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ pattern, message: '密码要同时含有数字和字母且长度要在8-16位之间' }]"
    />
    <van-field
      v-model="repassword"
      type="password"
      name="请确认密码"
      label="确认密码"
      placeholder="请重复密码"
      :rules="[{ validator, message: '密码输入不一致,请重新输入' }]"
    />
    <van-field
      v-model="sysuser.email"
      type="email"
      name="邮箱"
      label="邮箱"
      placeholder="请输入邮箱地址"
    />
    <van-field
      v-model="sysuser.mobile"
      type="tel"
      name="手机号"
      label="手机号"
      placeholder="请输入手机号"
    />
    <van-field
      v-model="sysuser.code"
      center
      clearable
      label="邮箱验证码"
      placeholder="请输入邮箱验证码"
    >
      <template #button>
        <van-button v-if="sysuser.email.length >= 6 && showCountdown == true" ref="smsCode" slot="button" size="mini">
          <van-count-down :time="time" style="color:#777" format=" ss 秒后重试" @finish="countDownFinish" />
        </van-button>
        <van-button v-else-if="sysuser.email.length >=6" slot="button" size="mini" type="primary" @click="send()">获取验证码</van-button>
        <van-button v-else slot="button" disabled size="mini">获取验证码</van-button>
      </template>
    </van-field>

    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit" @click="onSubmit">注册</van-button>
    </div>
  </van-form>
</template>

<script>
import sysuser from '@/api/sysuser'
import { Toast } from 'vant'
export default {
  name: 'Form',
  data() {
    return {
      pattern: /(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}/,
      sysuser: {
        username: '',
        password: '',
        email: '',
        mobile: '',
        code: ''
      },
      repassword: '',
      time: 60 * 1000, // 倒计时的时间  毫秒级 60秒要*10000
      showCountdown: false// 是否显示倒计时
    }
  },
  methods: {
    validator(val) {
      return val === this.sysuser.password
    },
    onSubmit(values) {
      if (this.sysuser.mobile === '' ||
        this.sysuser.username === '' ||
        this.sysuser.email === '' ||
        this.sysuser.code === '' ||
        this.repassword === '' ||
        this.sysuser.password === '') {
        Toast.fail('有空项目不能提交')
      } else {
        sysuser.save(this.sysuser).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/login' })
        })
      }
    },
    send() {
      this.showCountdown = true
      sysuser.send(this.sysuser.email).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
      })
    },
    countDownFinish() { // 倒计时结束后的方法
      this.showCountdown = false // 隐藏倒计时
    }

  }
}
</script>

<style scoped>

</style>
